<template>
  <div>
    <!--工具栏-->
    <div>
      <!-- 搜索 -->
      <el-input
        v-model="query.code"
        size="small"
        clearable
        placeholder="编码"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="crud.toQuery"
      />
      <el-input
        v-model="query.name"
        size="small"
        clearable
        placeholder="名称"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="crud.toQuery"
      />
      <el-input
        v-model="query.dsSource"
        size="small"
        clearable
        placeholder="源数据源"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="crud.toQuery"
      />
      <el-input
        v-model="query.sourceTable"
        size="small"
        clearable
        placeholder="源表名"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="crud.toQuery"
      />
      <el-input
        v-model="query.dsTarget"
        size="small"
        clearable
        placeholder="目标数据源"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="crud.toQuery"
      />
      <el-input
        v-model="query.targetTable"
        size="small"
        clearable
        placeholder="目标表名"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="crud.toQuery"
      />
      <rrOperation />
    </div>
    <div class="head-container">
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        stripe
        border
        style="width: 100%;overflow-y: auto;"
        @row-dblclick="checkMainItem"
        @sort-change="sortChange"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="code" label="编码" sortable="custom" />
        <el-table-column
          prop="name"
          label="名称"
          sortable="custom"
          width="130"
        />
        <el-table-column
          prop="dsSource"
          label="源数据源"
          sortable="custom"
          width="130"
        />
        <el-table-column prop="sourceTable" label="源表名" sortable="custom" />
        <el-table-column
          prop="dsTarget"
          label="目标数据源"
          sortable="custom"
          width="130"
        />
        <el-table-column
          prop="targetTable"
          label="目标表名"
          sortable="custom"
        />
      </el-table>
    </div>
    <!--分页组件-->
    <pagination />
    <div slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="checkMainItem(undefined, crud.selections)"
      >确定</el-button>
    </div>
  </div>
</template>

<script>
/* eslint-disable */

import crudMigDefMain from "@/api/migrate/migDefMain";
import {
  getOrginSource,
  getTables,
  doMigrate
} from "@/api/migrate/coustomFunction";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import crudOperation from "@crud/CRUD.operation";
import customBtns from "@crud/customBtns";
import rrOperation from "@crud/RR.operation";
import customOperation from "@crud/customOperation";
import pagination from "@crud/Pagination";
// import DateRangePicker from "@/components/DateRangePicker";

import qs from "qs";
const defaultForm = {
  id: null,
  code: null,
  name: null,
  sourceTable: null,
  targetTable: null,
  dsSource: null,
  dsTarget: null,
  extClass: null,
  sourcePk: null,
  targetPk: null,
  extJson: null,
  fdIncr: null,
  incrValue: null,
  querySql: null,
  lastSyncTime: null,
  syncTableDdl: null,
  fdTitle: null,
  fdEmergency: null,
  fdCode: null,
  recordLog: null,
  delFlag: null,
  createTime: null,
  updateTime: null,
  memo: null
};
export default {
  name: "MigDefMainCheck",
  components: {
    pagination,
    crudOperation,
    customOperation,
    rrOperation,
    customBtns
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    const formData = CRUD({
      size: 10,
      title: "迁移数据表",
      url: "api/migDefMain",
      sort: "id,desc",
      crudMethod: { ...crudMigDefMain }
    });
    return formData;
  },
  data() {
    return {
      targetDialog: false,
      configDialog: false,
      permission: {
        add: ["admin", "migDefMain:add"],
        edit: ["admin", "migDefMain:edit"],
        del: ["admin", "migDefMain:del"],
        config: true
      },
      routePath: {
        add: "/migDefAdd",
        edit: "/migDefEdit"
      },
      permissionRow: {
        edit: ["admin", "migDefMain:edit"],
        del: ["migDefMain:del"],
        config: true
      }
    };
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true;
    },
    sortChange(data = {}) {
      const prop = data.prop;
      const order =
        data.order == "ascending" || data.order == "asc" ? "asc" : "desc";
      if (prop) {
        this.crud.sort = [`${prop},${order}`];
        this.crud.toQuery();
      }
    },
    checkMainItem(row, arr) {
      const data = row ? [row] : arr;
      this.$emit("checkMainItem", data);
    },
    getOrgin() {
      //数据源的列表
      getOrginSource().then(res => {
        if (res && res.content) {
          let data = res.content;
          let arr = [];
          data.map(i => {
            arr.push({
              label: i.name,
              value: i.name
            });
          });
          this.sourceDsSourceArr = arr;
        }
      });
    }
  },
  created() {
    this.getOrgin();
  }
};
</script>

<style scoped>
.filedWidth {
  width: 350px;
}
.checkFiledWidth {
  width: 330px;
}
.filedWidthLong {
  width: 800px;
}
.head-container {
  height: 55vh;
  overflow-y: auto;
}
</style>
<style>
.formClass .el-form-item label.el-form-item__label {
  font-weight: normal;
}
.formClass {
  display: flex;
  flex-wrap: wrap;
}
.dialog-footer {
  text-align: center;
}
.dialog-footer button {
  margin: auto 50px;
}
.searchFiled {
  padding-right: 20px;
  position: relative;
}
.searchIcon {
  position: absolute;
  right: 5px;
  top: 6px;
  cursor: pointer;
  font-size: 16px;
  color: #42b983;
  margin-left: 4px;
}

.check_ul {
  display: flex;
  flex-wrap: wrap;
}
.check_li {
  display: inline-block;
  line-height: 30px;
  height: 30px;
  text-align: center;
  border: 1px solid #eee;
  margin: 0 10px 10px 0;
  padding: 0 8px;
  cursor: pointer;
}
.li_checked {
  background-color: #eee;
}

.exec-loading {
  width: 29px;
  height: 29px;
}
</style>
